﻿@{
    ViewBag.Title = "Administrar tickets";
}

@section css {
    @Styles.Render("~/Content/datetimepicker")
    @Styles.Render("~/Content/bootstrap-select")
}

<h2>@ViewBag.Title</h2>
<p class="text-success">@ViewBag.StatusMessage</p>
<div class="row">
    <div class="col-sm-4">
        <label class="control-label" for="InitialDate">Del:</label>
        <div id="InitialDate" class="input-group datepicker" data-provide="datepicker">
            <input id="InitialDate-Val" type="text" class="form-control" readonly="readonly">
            <div class="btn btn-default input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <label class="control-label" for="EndDate">Al:</label>
        <div id="EndDate" class="input-group datepicker" data-provide="datepicker">
            <input id="EndDate-Val" type="text" class="form-control" readonly="readonly">
            <div class="btn btn-default input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <label class="control-label" for="Status">Estado:</label>
        <div id="Status">
            <select id="sel-status" class="selectpicker">
                <option>Todos</option>
                <option>Abiertos</option>
                <option>Cerrados</option>
            </select>
        </div>
    </div>
</div>
<div class="table-responsive">
    <table id="grid-data" class="table table-striped">
        <thead>
            <tr>
                <th data-column-id="link" data-formatter="link" data-sortable="false">Opciones</th>
                <th data-column-id="Id">Folio</th>
                <th data-column-id="issue">Servicio</th>
                <th data-column-id="details">Detalle</th>
                <th data-column-id="userName">Usuario</th>
                <th data-column-id="ticketDate">Fecha</th>
            </tr>
        </thead>
    </table>
</div>

@section Scripts {
    @Scripts.Render("~/bundles/datetimepicker")
    @Scripts.Render("~/bundles/bootstrap-select")
    <script type="text/javascript">
        $(document).ready(function () {
            $('#InitialDate').datetimepicker({
                useCurrent: false,
                defaultDate: new Date().setDate(new Date().getDate() - new Date().getDay()),
                daysOfWeekDisabled: [0],
                locale: 'es',
                ignoreReadonly: true
            });

            $('#EndDate').datetimepicker({
                useCurrent: false,
                defaultDate: new Date(),
                daysOfWeekDisabled: [0],
                locale: 'es',
                ignoreReadonly: true
            });

            $(".datepicker").on("dp.change", function (e) {
                $("#grid-data").bootgrid("reload");
            });

            $("#grid-data").bootgrid({
                ajax: true,
                post: function () {
                    /* To accumulate custom parameter with the request object */
                    return {
                        init: $('#InitialDate-Val').val(),
                        end: $('#EndDate-Val').val(),
                        status: $("#sel-status option:selected").text()
                    };
                },
                url: "@Url.Action("GetTickets")",
                formatters: {
                    "link": function (column, row) {
                        var components = '';
                        if (row.Closed)
                            components += '<div style="float: left; padding: 4px 4px 4px 5px;" title="Reporte del ticket"><a href=\"' + '@Url.Action("File", "Tickets")/' + row.Id + '" role="button" class="btn btn-primary">' +
                                    '<span class="glyphicon glyphicon-file" aria-hidden="true"></span></a></div>';
                        components += '<div style="float: left; padding: 4px;" title="Detalles del ticket"><a href=\"' + '@Url.Action("Summary", "Tickets")/' + row.Id + '" role="button" class="btn btn-primary">' +
                                    '<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a></div>';
                        components += !row.Closed ? "" :
                            '<div style="float: left; padding-top: 3px;" title="Ticket cerrado"><span role="button" class="btn btn-danger">' +
                                '<span class="glyphicon glyphicon-alert" aria-hidden="true"> Cerrado</span></span></div>';
                        return components;
                    }
                },
                labels: {
                    noResults: "Ningún elemento encontrado",
                    infos: "Mostrando del {{ctx.start}} al {{ctx.end}} de {{ctx.total}} elemento(s)",
                    loading: "Cargando",
                    refresh: "Actualizar",
                    search: "Buscar"
                },
                columnSelection: false,
                rowCount: 10
            });

            $("#sel-status").bind('change', function () {
                $("#grid-data").bootgrid("reload");
            });
        });
    </script>
}
